/*用户管理,作者:高振中,日期:2020-12-20 22:36:10*/
<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="机构"> <el-input placeholder="请输入机构" size="mini" v-model="form.deptId"></el-input> </el-form-item>
      <el-form-item label="姓名"> <el-input placeholder="请输入姓名" size="mini" v-model="form.name"></el-input> </el-form-item>
      <el-form-item label="登录名"> <el-input placeholder="请输入登录名" size="mini" v-model="form.loginName"></el-input> </el-form-item>
      <el-form-item label="电话"> <el-input placeholder="请输入电话" size="mini" v-model="form.phone"></el-input> </el-form-item>
      <el-form-item label="性别"> <el-input placeholder="请输入性别" size="mini" v-model="form.gender"></el-input> </el-form-item>
      <el-form-item label="状态"> <el-input placeholder="请输入状态" size="mini" v-model="form.status"></el-input> </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="loadData">查询</el-button>
        <el-button size="mini" @click="doReset">重置</el-button>
        <el-button size="mini" @click="doAdd" type="primary">添加</el-button>
        <el-button size="mini" @click="doDelete(selectIds)" v-if="selectIds.length > 0">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" v-loading="loading" element-loading-text="正在加载......" border @selection-change="selectChange" :row-style="iRowStyle" :cell-style="iCellStyle" :header-row-style="iHeaderRowStyle" :header-cell-style="iHeaderCellStyle">
      <el-table-column type="selection" width="36"></el-table-column>
      <el-table-column prop="deptName" label="机构名称"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="loginName" label="登录名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="gender" label="性别" :formatter="genderFormat"></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormat"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" :formatter="dateFormat"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="头像" width="50">
        <template slot-scope="props">
          <el-popover trigger="hover"> <img :src="props.row.avatarUrl" height="300px" /> <el-button type="text" slot="reference" size="mini">头像</el-button> </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="props">
          <div><el-button type="text" size="mini" @click="doEdit(props.row)">编辑</el-button> <el-button type="text" size="mini" @click="doDelete([props.row.userId])">删除</el-button></div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right" v-if="total > 0">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :total="total" @current-change="(page) => pageChange(page)" :page-sizes="[20, 30, 50, 100]" @size-change="(size) => sizeChange(size)" :page-size="size" mini></el-pagination>
    </div>
    <UserDialog ref="dialog" :loadData="loadData"></UserDialog>
  </div>
</template>
<script>
import UserDialog from "./UserDialog.vue";
import { pageMix } from "@/common/page";
import { genderFormat, statusFormat, dateFormat } from "@/common/dicts";
export default {
  mixins: [pageMix],
  components: { UserDialog },
  data() { return {}; },
  created() { this.loadData(); },
  methods: {
    statusFormat,
    genderFormat,
    dateFormat,
    /**用户-查询参数*/
    initForm() { return { deptId: null, /*机构ID*/ name: null, /*姓名*/ password: null, /*密码*/ loginName: null, /*登录名*/ avatar: null, /*头像*/ phone: null, /*电话*/ gender: null, /*性别*/ status: null, /*状态*/ }; },
    /**用户-请求列表*/
    loadData() {
      this.loading = true;
      const param = { ...this.form, page: this.page, size: this.size };
      this.rq.post("/user/page", param).then((res) => { this.dataList = res.data.dataList; this.total = res.data.rowCount; this.loading = false; });
    },
    /**用户-删除*/
    doDelete(ids) {
      this.$confirm("你确定要删除吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
        this.rq.post("/user/delete", ids).then((res) => {
          if (res.code == 200) { this.$message.success("删除成功"); this.loadData(); } else this.$message.error(res.msg);
        });
      });
    },
    /**用户-切换选择*/
    selectChange(rows) { this.selectIds = rows.map((item) => item.userId); },
  },
};
</script>
<style scoped lang="scss"></style>
